<template>
  <div class="_wrap">
    <div class="_tit"><span>临退人员情况</span></div>
    <div class="__content">
      <div class="item" v-for="(item, i) in list" :key="i">
        <div class="img">
          <img src="~@/assets/imgPersonnel/icon2.svg">
          <img src="~@/assets/imgPersonnel/iconBg1.svg">
        </div>
        <div class="inner">
          <div class="label">{{item.label}}</div>
          <div class="value">{{item.value}}<span class="unit">(人)</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'itemCenterBottom',
    components: {},
    data() {
      return {
        list: [
          { label: '近一年', value: 526 },
          { label: '近两年', value: 556 },
          { label: '近三年', value: 851 }
        ]
      }
    },
    mounted() {
    },
    methods: {}
  }
</script>

<style scoped lang="scss">
  ._wrap {
    width: 100%; height: 239px; background: url('~@/assets/imgPersonnel/boxBg.svg') left no-repeat;
    position: relative; display: grid; grid-template-rows: 42px auto;
    &:after {
      content: ''; display: flex; width: 6px; height: 100%; position: absolute; top: 0; right: -5px;
      background: url('~@/assets/imgPersonnel/boxBg.svg') right no-repeat;
    }
    ._tit {
      display: flex; align-items: center; height: 42px;
      font-size: 24px; font-family: PingFangSC; font-weight: bold; letter-spacing: 1.96px;
      span { margin-left: 40px;}
    }
    .__content {
      padding: 16px;
      display: grid; grid-template-columns: 1fr 1fr 1fr;
       .item {
         display: flex; align-items: center; justify-content: center;
         border-left: 1px dashed rgba(255,255,255,0.3);
         .img {
           position: relative;
           img:nth-child(1){ position: absolute; width: 34px; height: 34px; left: 50%; margin-left: -17px; z-index: 2; }
           img:nth-child(2){ width: 105px; height: 84px; }
         }
         .inner {
           margin-left: 15px;
           .label {
             font-size: 16px; font-family: PingFangSC;
           }
           .value {
             font-size: 24px; font-family: DINPro;
             .unit { font-size: 16px; font-family: PingFangSC; margin-left: 15px; }
           }
         }
         &:first-child { border-left: 0;}
       }
    }
  }
</style>
